/**
 * 项目中可以复用的数据和逻辑方法
 */
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import dayjs from 'dayjs'
import { ref, onBeforeUnmount, computed } from 'vue'

/**
 * apiCallBack 页面中请求的方法=>回调函数
 */
export function useObserve (apiCallBack) {
  // 2.执行监控
  /**
   * 1.useIntersectionObserver函数的返回值对象,对象中的stop方法可以监控
   * 2.useIntersectionObserver(
   * target:监控的dom对象或组件实例
   * callback:被监控对象进入可视区域执行的回调函数
   * options?:配置监控行为=>?是ts语法,代表非必传
   * )
   */
  /**
   * 需求:当前组件进入可视区域,发请求获取数据
   * 根据useIntersectionObserver监控函数的回调中isIntersecting判断实现
   */
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    // 参数1是个数组:解构出数组中对像的isIntersecting的值(Boolean)=>用来判断元素是否进入可视区域
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        // 发请求
        apiCallBack()
        // 发完停止发请求
        stop()
      }
      // console.log(isIntersecting ? '进入监控区域' : '跳出监控区域')
    },
    {
      threshold: 0 // 说明:0-1区间=>默认大于0=>如果想进入可视边界立马执行=>设置为0
    }
  )
  return { target }
}
/**
 *倒计时方法
 * @param {*} time 倒计时秒数
 */
export function useCountDown (time) {
  const count = ref(0)
  // pause 停止定时器 resume 开始定时器
  /**
   * 分秒倒计时
   * 1.计算秒数的变化
   * 2.怎么控制是否立即执行
   */
  const countText = computed(() => {
    return dayjs.unix(count.value).format('mm分ss秒')
  })
  /**
   * useIntervalFn方法
   * 1.立即执行
   * 2.怎么控制是否立即执行?
   */
  const { pause, resume } = useIntervalFn(() => {
    count.value--
    // 判断小于等于0停止定时器
    if (count.value <= 0) {
      pause()
    }
  }, 1000, { immediate: false })
  // 定义开始定时器方法
  function start (tm) {
    if (count.value === 0) {
      // 给倒计时秒数赋值
      count.value = time || tm //
    }
    // 开始倒计时
    resume()
  }
  onBeforeUnmount(() => {
    pause()
  })
  return { count, start, pause, countText }
}
